<!--Page that displays an illustration and all information related to it, including ability to rate-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Specific Fiction - Comics.US</title>
<link rel="stylesheet" href="../template.css" type="text/css" />

</head>
<body>
<div id="outer_container">
  <div id="inner_container">
    <div id="header_wrapper">


      <div id="login"><!--Display username when logged in-->
       Welcome, {{username}}
      </div>  
    </div>
    <div id="navigator_container">
    <!--Links at top of page-->
      <div id="navigator"><a href="../home" id="gl1" class="glink"> Home  |   </a><a href="../list/comics/1" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);"> Comics  |   </a><a href="../list/fiction/1" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);"> Fictions  |   </a><a href="../list/gallery/1" id="gl4" class="glink" onmouseover="ehandler(event,menuitem3);"> Gallery  |   </a><a href="../list/clan/1" id="gl5" class="glink" onmouseover="ehandler(event,menuitem3);"> Clans  |   </a><a href="../list/people/1" id="gl7" class="glink" onmouseover="ehandler(event,menuitem3);"> People  |   </a><a href="../profile/{{username}}" id="gl6" class="glink" onmouseover="ehandler(event,menuitem3);"> Profile </a></div>
      <div id="search_container">
        <form id="form2" name="form2" method="post" action="">
          <label>
            <input type="text" name="textfield3" id="textfield3" />
          </label>
                     <label>
            <input type="submit" name="button" id="button" value="Search" width="15px" />
          </label>
        </form>
      </div>
    </div>
    <div id="listing_header_container">
      <p>Breadcrumb (remain the same for all pages)</p>
    </div>
    <div id="doc2">
    <div id="main_area_specific_comics">
    <div id="maincontent_in_homepage"> 
        <div id="comics_fiction_illustration">

          <div id="speicific_work_cover_picture">
             <div id="speicific_work_cover_picture_area1">
			 <img src="../{{art.path}}" alt="{{art.title}}" style="height:300px;width:290px"/>  <!--Display uploaded illustration-->
			 </div>
             <div id="speicific_work_cover_picture_area2">
               <form id="form3" name="form3" method="post" action="rate/{{art.title}}">  <!--radio buttons to rate user on a 1-5 scale-->
                 <label>Rate:
                   <input type="radio" name="rate" value="1" id="RadioGroup1_0" /> 
                   1</label>
                 <label>
                   <input type="radio" name="rate" value="2" id="RadioGroup1_1" />
                   2</label>
                 <label>
                   <input type="radio" name="rate" value="3" id="RadioGroup1_2" />
                   3</label>
                 <label>
                   <input type="radio" name="rate" value="4" id="RadioGroup1_3"/> 
                   4</label>
				 <label>
				   <input type="radio" name="rate" value="5" id="RadioGroup1_4" /> 
				   5</label>
				 <label><br>
				 
				   <input type="submit" name="sumbit" value="Rate"/> <br>
               </form> 
                <form>

                   <input type="submit" name="button2" id="button2" value="Add to my Favorite" />   <!--Button to add to favorites-->
                   <br>
                   <input type="submit" name="button3" id="button3" value="Recommend to Friends" /> <!--Button to reccomend illustration to friends-->
                 </label>
               </form>
             </div>
          </div>

          
          
          <div id="new_comics_and_fiction">
            <div id="info_area"><img src="../../../background/title.png"/>.  {{art.title}}<br><img src="../../../background/author.png"/>.  {{art.of.username}}<br><img src="../../../background/genre.png"/>. {{art.genre}}<br><img src="../../../background/rating.png"/>. {{art.vote}}</div>
            <div id="speicific_work_abstract" style="background:white"><div id="speicific_work_abstract_banner"></div>
			Abstract
            ..............................<a href="#"> Read More</a><a href="#"></a></div>    <!--Display information about the illustration-->
          </div>




        </div>
<!--Ability to comment illustration-->
       <div id="comment">
		<form id="form4" name="form4" method="post" action="{{art.title}}/comment">
        <label>
          <form action="">
  			<input type="text" name="comment" value="Make Comments here"  onfocus="this.value=''" style="width: 90%; height: 100%"/>
			<input type="submit" name="button3" id="button3" value="Submit" />
			</form>
        </label>
      </form>
      <div id="comments_banner"></div>
	  {% for f in comments %}<!--Look to display all comments-->
      	&nbsp &nbsp <a href="../profile/{{f.poster}}">{{f.poster}}</a>&nbsp- {{f.userComment}}<br>
		{% endfor %}
      </p>
    </div>
      </div>
      <div id="ranking_in_homepage">  <!--Display rankings to fictions-->
        <div id="fiction_rank">
		  <div id="illustration_rank_banner"></div>
       {% for f in top %}
		  <p><a href="../illustration/{{f.title}}">{{f.title}}</a></p>
		  {% endfor %}
          <p>&nbsp;</p>
        </div>
        <!--Addvertisement Space-->
        <div id="ad">
        </div>
                <div id="ad1">
        </div>
                <div id="ad2">
        </div>
      </div>
    
    
    
    
    
    </div>
    </div>
    <div id="footer_container">footer_container
    </div>
  </div>
</div>
</body>
</html>

